<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.qrcode.js}"></script>
    <script type="text/javascript" th:src="@{/js/qrcode.js}"></script>
</head>
<body>
<table class="table">
    <tr>
        <td>下单时间</td>
        <td>订单号</td>
        <td>商品名称</td>
        <td>价格</td>
        <td>产品快照</td>
        <td>支付渠道</td>
        <td>件数</td>
        <td>订单状态</td>
    </tr>
    <tr th:each="orderDTO,orderDTOStat : ${orderDTOList}">
        <td>
            <span th:text="${#dates.format(orderDTO.createTime,'yyyy-MM-dd')}"></span>
        </td>
        <td>
            <span th:text="${orderDTO.orderId}" id="order_id"></span>
            <input th:value="${orderDTO.orderId}" hidden="hidden" id="order_id_value"/>
        </td>
        <td>
            <span th:text="${orderDTO.productName}"></span>
        </td>
        <td>
            <span th:text="${orderDTO.secondKillPrice}"></span>
        </td>
        <td>
            <span><img th:src="@{'/image/'+${orderDTO.imgUrl}}"></span>
        </td>
        <td>
            <span th:if="${orderDTO.payChannel eq 0}">PC端</span>
            <span th:if="${orderDTO.payChannel eq 1}">手机端</span>
        </td>
        <td><span th:text="${orderDTO.count}"></span></td>
        <td>
    <span th:if="${orderDTO.status eq 0}">
        <button class="btn btn-primary" name="pay_button">支付</button>
    </span>
            <span th:if="${orderDTO.status eq 2}">
        <button class="btn btn-primary">收货</button>
    </span>
            <span th:if="${orderDTO.status eq 3}">
                    <button class="btn btn-primary"></button>
    </span>
            <span th:if="${orderDTO.status eq 5}">
      完成
    </span>
        </td>
        <td><a th:href="@{'/order/detail/'+${orderDTO.orderId}}">查看详情</a></td>
    </tr>


</table>
<!--支付宝二维码模态框-->
<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="payQrCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">二维码</h4>
            </div>
            <div id="pay-qrcode-img"></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script>
    $(
        function () {

            bindingGenerateQrcode();

            function bindingGenerateQrcode() {

                $("button[name='pay_button']").click(
                    function () {
                        generatorQrcode();
                        checkPay();
                    }
                )
            }
            function generatorQrcode() {
                $.ajax({
                        url: '/pay/generatePayQrCode',
                        data: {
                            'orderId': $("input[id='order_id_value']").val()
                        },
                        type: 'POST',
                        success: function (res) {
                            $('#payQrCodeModal').modal('show');

                            $("#pay-qrcode-img").qrcode({
                                render: "canvas", //也可以替换为table
                                foreground: "#000",
                                background: "#FFF",
                                text: res.data.qrCode
                            });
                        }
                    }
                )
            }
            let status = true;
             checkPay = function checkPay() {
                $.ajax(
                    {
                        url: "/pay/payCheck",
                        data: {
                            orderId: $("input[id='order_id_value']").val()
                        },
                        type: 'POST',
                        success: function (res) {

                            if (res.msg === "1") {
                                this.status = false;
                                layer.msg(res.msg);
                                $("#payQrCodeModal").modal("hide");

                            } else {
                                if (status) {
                                    window.setInterval("checkPay()", 5000);
                                }
                                layer.msg(res.msg)
                            }

                        }
                    }
                )

            }


        }
    )
</script>

</html>




